Skip to content

[pull] main from tldraw:main#523

Merged
pull[bot] merged 4 commits intocode:mainfrom
tldraw:main
Apr 29, 2026
Merged

[pull] main from tldraw:main#523
pull[bot] merged 4 commits intocode:mainfrom
tldraw:main

Conversation

@pull
Copy link
Copy Markdown

@pull pull Bot commented Apr 29, 2026

See Commits and Changes for more details.


Created by pull[bot] (v2.0.0-alpha.4)

Can you help keep this open source service alive? 💖 Please sponsor : )

danieljamesross and others added 4 commits April 29, 2026 15:18
…ds has non-zero offset (#8704)

In order to fix a mis-positioned click when using the comma key on hosts
with a canvas offset
(e.g. tldraw.com with the sidebar open), this PR corrects the
`pointer_up` event dispatched by the
comma-key click handler.
    
The `pointer_up` handler in `useKeyboardShortcuts` was passing
`getCurrentScreenPoint()` as the
event point. That value is canvas-relative (screenBounds already
subtracted), but
`InputsManager.updateFromEvent` always subtracts `screenBounds` again —
a double subtraction that
shifts the registered click position left by `screenBounds.x` (the
sidebar width on tldraw.com).
This also caused the distance between `pointer_down` and `pointer_up` to
exceed the drag
threshold, so comma-key clicks could register as drags instead.

The fix mirrors the existing `pointer_down` handler: convert
`currentPagePoint` to absolute screen
coordinates via `editor.pageToScreen` before dispatching `pointer_up`.
Closes #8684

### Change type

- [x] `bugfix`

### Test plan   

1. Open tldraw.com with the sidebar open (or any host with a non-zero
`screenBounds` offset).
2. Hover the cursor over a shape.
3. Press and release comma. Confirm the click lands at the cursor
position.

- [x] Unit tests

### Release notes

- Fix comma key click registering at the wrong position when the canvas
has a
screen offset (e.g. with the tldraw.com sidebar open).
In order to fix low-contrast text on CTA buttons across color themes,
this PR replaces hardcoded white text colors with
`var(--tla-color-contrast)` and updates the `--tla-color-contrast` token
in theme definitions to ensure readable text.

Closes #8682

**CTA and primary button text:** The Share button, `TlaButton` `.cta`
variant, CTA button component, and invite dialog accept button all
hardcoded `color: #ffffff` or `color: white`. Several themes (Monokai,
Nord dark, Catppuccin, etc.) use a light CTA background where white text
has poor contrast. This PR switches these to `color:
var(--tla-color-contrast)` and updates `--tla-color-contrast` in 14
theme variants to use a color with sufficient contrast against the CTA
background.

**Monokai light fixes:** Also corrects `tl-color-selected-contrast` and
`tl-color-tooltip` values in the Monokai light theme variant.

### Change type

- [x] `bugfix`

### Test plan

1. Open tldraw.com as a signed-in user
2. Switch to Monokai light — confirm Share button text is dark and
readable
3. Open the share menu — confirm Copy link button text is also dark and
readable
4. Switch to Nord dark, Catppuccin dark, One Dark, Tokyo Night dark —
confirm CTA button text is readable
5. Switch to default theme (light and dark) — confirm Share and Copy
link text are still white

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Fix CTA button text colors not adapting to color themes

### Code changes

| Section | LOC change |
| ------- | ---------- |
| Apps    | +18 / -18  |
In order to stop the resize cursor from persisting when a user
double-clicks a resize handle to enter text editing mode, this PR resets
the cursor to `default` in `EditingShape.onEnter`.

Closes #8679

### Background

After #8633 (canvas OverlayUtil system), the resize-handle cursor is set
imperatively in `updateHoveredOverlayId` while a handle overlay is
hovered. The cursor is only reset when the pointer leaves an overlay
during `Idle.onPointerMove`. Double-clicking a resize handle transitions
the select tool from `idle` to `editing_shape`, so `Idle.onPointerMove`
stops running and the resize cursor is never cleared.

### Fix

`EditingShape.onEnter` now resets the cursor to `default`. Edit mode has
a single, deterministic correct cursor regardless of what set the cursor
previously, so resetting unconditionally on entry is the safest place.
This composes with whatever set the cursor previously and is robust to
other future overlays or states that may leave a sticky cursor.

### Change type

- [x] `bugfix`

### Test plan

1. Run `yarn dev` and open the examples app at `localhost:5420`.
2. Draw a rectangle.
3. Hover the right edge resize handle — cursor becomes `ew-resize`.
4. Double-click the handle — text editing mode begins, and the cursor
should now reset to default instead of staying as `ew-resize`.

- [x] Unit tests
- [ ] End to end tests

### Release notes

- Fix the resize cursor persisting when double-clicking a resize handle
to edit a shape's text.

### Code changes

| Section   | LOC change |
| --------- | ---------- |
| Core code | +1 / -0    |
| Tests     | +18 / -0   |
In order to give logged-out users the same color theme picker that
signed-in users get, this PR adds `UIThemeSubmenu` to the preferences
menu in the anonymous top-left panel.

Previously, `TlaEditorTopLeftPanelAnonymous` rendered the SDK's
`PreferencesGroup` directly, so it had no way to inject the
dotcom-specific theme picker. The group is now inlined locally as
`TlaPreferencesGroup`, with `<UIThemeSubmenu />` slotted in next to
`ColorSchemeMenu`, `AccessibilityMenu`, and `InputModeMenu`. The
signed-in panel is unchanged — it already pulled in `UIThemeSubmenu` via
its own menu.

To inline the preferences group, `InputModeMenu` had to be exported from
`tldraw`; it was already part of the default preferences menu but not
part of the public API.

### Change type

- [x] `bugfix`

### Test plan

1. Open tldraw.com without signing in (or open a published file in a
logged-out session).
2. Open the top-left dropdown menu and expand **Preferences**.
3. Confirm the **Color theme** submenu appears under the user-interface
group, alongside **Color scheme**, **Accessibility**, and **Input
device**.
4. Pick a theme and confirm the selection sticks.
5. Sign in and confirm the signed-in editor's preferences menu still
shows the same submenus and behaves as before.

### Release notes

- The color theme picker now appears in the preferences menu for the
anonymous tldraw.com editor.

### API changes

- Added `InputModeMenu` to the public API of `tldraw`.

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +1 / -0    |
| Automated files | +3 / -0    |
| Apps            | +46 / -1   |

---------

Co-authored-by: Kostya Farber <kostya.farber@gmail.com>
@pull pull Bot locked and limited conversation to collaborators Apr 29, 2026
@pull pull Bot added the ⤵️ pull label Apr 29, 2026
@pull pull Bot merged commit 671472a into code:main Apr 29, 2026
@pull pull Bot had a problem deploying to deploy-production April 29, 2026 21:13 Failure
@pull pull Bot had a problem deploying to vsce publish April 29, 2026 21:13 Failure
@pull pull Bot had a problem deploying to deploy-staging April 29, 2026 21:13 Error
@pull pull Bot had a problem deploying to deploy-staging April 29, 2026 21:13 Failure
@pull pull Bot had a problem deploying to deploy-staging April 30, 2026 00:46 Failure
@pull pull Bot temporarily deployed to e2e-dotcom April 30, 2026 02:37 Inactive
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants